import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View, Button, Image, Text } from '@tarojs/components'
import { AtCard, AtButton, AtMessage } from 'taro-ui'
import './index.scss'
import { getCurrentInstance } from '@tarojs/taro'
import { getPersonalDetail } from '../../api/index'
import TotalData from './component/totalData/index'
import VideoData from './component/videoData/index'
import VideoList from './component/videoList/index'
import PersonalData from './component/personalData/index'

interface PersonalTags {
  tagName: string
  tagType: number
}

interface PersonalDetail {
  face: string
  name: string
  OfficialVerifyDesc: string
  sign: string
  tags: Array<PersonalTags>
  fans: number
  archiveView: number //播放总数
  likes: number
  totalFavourite: number //收藏
  archiveCount: number //作品总数
  totalCount: number //充电总数
}

export default () => {
  const [personalDetail, setPersonalDetail] = useState<PersonalDetail>()
  const [id, setId] = useState(0)
  const [current, setCurrent] = useState(1)

  useEffect(() => {
    let routerData = getCurrentInstance().router as any
    let { id } = routerData.params
    setId(id)
    ;(async () => {
      const {
        data: { data, errorCode, errorMessage }
      } = await getPersonalDetail({
        id
      })
      if (!errorCode) {
        setPersonalDetail(data)
      } else {
        Taro.atMessage({
          type: 'error',
          message: errorMessage + '，请充值'
        })
      }
    })()
  }, [])

  const chooseCom = (cur) => {
    setCurrent(cur)
  }

  const setComponents = () => {
    if (current === 1) {
      return <TotalData id={id} detail={personalDetail}></TotalData>
    } else if (current === 2) {
      return <VideoData id={id} detail={personalDetail}></VideoData>
    } else if (current === 4) {
      return <PersonalData id={id}></PersonalData>
    } else if (current === 3) {
      return <VideoList id={id}></VideoList>
    }
  }

  return (
    <View>
      <AtCard
        note={personalDetail?.sign}
        title={personalDetail?.name}
        thumb={personalDetail?.face}
      >
        <Text className="desc">{personalDetail?.OfficialVerifyDesc}</Text>
        <View>
          {personalDetail?.tags.map((item) => {
            try {
              return (
                <AtButton
                  size="small"
                  type="secondary"
                  className="personal-detail-tag"
                >
                  {item?.tagName}
                </AtButton>
              )
            } catch (error) {}
          })}
        </View>
      </AtCard>
      <View className="personal-detail-choose-components">
        <AtButton
          className={current === 1 ? 'choosed-btn' : 'choose-btn'}
          type="secondary"
          size="small"
          key="1"
          onClick={() => chooseCom(1)}
        >
          整体数据
        </AtButton>
        <AtButton
          className={current === 2 ? 'choosed-btn' : 'choose-btn'}
          type="secondary"
          size="small"
          key="2"
          onClick={() => chooseCom(2)}
        >
          视频数据
        </AtButton>
        <AtButton
          className={current === 3 ? 'choosed-btn' : 'choose-btn'}
          type="secondary"
          size="small"
          key="3"
          onClick={() => chooseCom(3)}
        >
          视频列表
        </AtButton>
        <AtButton
          className={current === 4 ? 'choosed-btn' : 'choose-btn'}
          type="secondary"
          size="small"
          key="4"
          onClick={() => chooseCom(4)}
        >
          用户数据
        </AtButton>
      </View>
      {setComponents()}
    </View>
  )
}

// return (
//   <View className="page-index">
//     <View className="line-chart">
//       {/* 通过 option 设置数据 */}
//       <EChart echarts={echarts} option={option} onInit={onInit} />
//     </View>
//   </View>
// )

// let onInit = (canvas, width, height, dpr) => {
//   const chart = echarts.init(canvas, 'light', {
//     width: width,
//     height: height,
//     devicePixelRatio: dpr // new
//   })
//   return chart // 必须return
// }
